<template>
  <div>
      <button @click="reduce">-</button>
      <output>{{val}}</output>
       <button @click="plus">+</button>
  </div>
</template>

<script>
export default {
    name:'Number',
    props:{
        value:{
            type:Number,
            default:0
        }
    },
    data(){
        return{
            val:this.value
        }
    },
    watch:{
        value(newVal){
            this.val=newVal
        },
        val(newVal){
            this.$emit('input',val)
        }
    },
    methods: {
        plus(){
            this.val+=1
        },
        reduce(){
            this.val-=1
        }
    },
}
</script>

<style>

</style>